<template>
  <div>
    <input type="checkbox" name="unarchivedOnly" v-model="unarchivedOnly" :value="unarchivedOnly">只显示未归档考勤表</input>
  </div>
  <table>
    <thead>
      <tr>
        <th>时间</th>
        <th>课程</th>
        <th>班级</th>
        <th>缺勤人数</th>
        <th>状态</th>
        <th>详情</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in filteredList">
        <td>{{ item.when }}</td>
        <td>{{ item.courseName }}</td>
        <td>{{ item.clazzName }}</td>
        <td>{{ item.absentCount }}</td>
        <td>{{ item.state }}</td>
        <td><a :href="'attend_' + item.id">查看</a></td>
      </tr>
    </tbody>
  </table>
</template>
<script>

import { mapActions } from 'pinia'
import { useCounsellorStore } from '../../stores/counsellor'
import _ from 'lodash'
import { util } from '../../utils'
export default {
  inject: ['axios'],

  methods: {
    ...mapActions(useCounsellorStore, ['fetchAttendencesWithAbsentCountOrderByStartFromDesc'])
  },

  computed: {
    filteredList() {
      return !this.unarchivedOnly ? this.attendences : _.filter(this.attendences, i => i.state != '已归档')
    }
  },

  async mounted() {
    let list = await this.fetchAttendencesWithAbsentCountOrderByStartFromDesc();
    list.forEach(item => item.when = util.when(item.startFrom, item.hours));
    this.attendences = list;
  },

  data() {

    return {
      unarchivedOnly: false,//只显示未归档考勤表
      attendences: []//[{id:1,when:'xxx',courseName:'算法',courseId:1,clazzId:1,clazzName:'软件2202',absentCount:2}]
    }
  },
}

</script>


<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
